<template>
	<view class="login-wrapper">
		<view class="login-title">
			<view class="login-title-txt">
				找回密码！
			</view>
			<text class="login-title-small-txt">输入您注册的手机号可帮你重新找回密码</text>
		</view>
		<view class="login-form">
			<view class="form-item flex-c">
				<text class="form-item-lable">手机号</text>
				<input type="text" class="form-item-input" placeholder="输入手机号" />
			</view>
			<view class="form-item flex-c">
				<text class="form-item-lable">验证码</text>
				<input type="number" class="form-item-input" placeholder="输入短信验证码" />
				<text class="get-code-btn">获取验证码</text>
			</view>
			
			<view class="form-item flex-c">
				<text class="form-item-lable">密码</text>
				<input type="password" v-model="password" class="form-item-input" placeholder="输入登陆密码" />
				<!-- <text class="get-code-btn" @click="toggleType">
					<uni-icons  type="eye" size="30"></uni-icons>
					<uni-icons type="eye-slash" size="30"></uni-icons>
				</text> -->
			</view>
			<view class="form-item flex-c">
				<text class="form-item-lable">确认密码</text>
				<input type="password" v-model="password" class="form-item-input" placeholder="输入登陆密码" /> 
			</view>
			
			<view class="agreement flex-c">
				<checkbox-group @change="">
					<label>
						<checkbox value="cb" checked="true" color="#EB5883" style="transform:scale(0.9)" />我已阅读并同意
					</label> 
				</checkbox-group>
				<text>《注册协议》</text>
				<text>《隐私政策》</text>
			</view>
			
			<button class="login-btn" @click="submit('customForm')">确认</button> 
		</view>  
	</view>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue'
import { onReady } from '@dcloudio/uni-app'

export default defineComponent({
	setup() {
		const title = ref('Hello')
		const state = reactive({
			customRules: {
				name: {
					rules: [{
						required: true,
						errorMessage: '姓名不能为空'
					}]
				},
				age: {
					rules: [{
						required: true,
						errorMessage: '年龄不能为空'
					}]
				},
			}
		})
		onReady(() => {
		   
		})
		return {
		  title,
		  ...toRefs(state)
		}
	}
})
</script>

<style lang="scss" scoped>
.login-wrapper{
	padding: 40rpx 0;
	.login-title{
		margin-left: 24rpx;
		.login-title-txt{
			font-size: 48rpx;
			font-weight: 700;
		}
		.login-title-small-txt{
			font-size: 28rpx;
			color: #999;
		}
	}
	.login-form{
		margin: 60rpx ;
		.form-item{
			height: 90rpx;
			background-color: #f0f0f0;
			border-radius: 45rpx;
			padding: 0 30rpx;
			margin-bottom: 30rpx;
			&:last-child{
				margin-bottom: 0rpx;
			}
			.form-item-lable{
				font-size: 32rpx;
				color: #666;
				margin-right: 20rpx;
			}
			.form-item-input{
				flex: 1;
				height: 32rpx;
				font-size: 32rpx;
			}
		} 
		.login-btn{
			height: 90rpx;
			background-color: $theme-primary-color;
			margin-top: 40rpx;
			border-radius: 45rpx;
			color: #fff;
			line-height: 90rpx;
			font-size: 34rpx;
		}
	} 
	.agreement{
		margin-top: 100rpx;
		font-size: 26rpx;
		color: #666;
		justify-content: center;
	}
}	
</style>
